<footer>
    <main>
        <!-- 友情链接 -->
        <div class="footer-links ui flex-item">
            <div class="start"><div class="margin-top-half">友情链接</div></div>
            <div class="center padding-bottom-half">
                {links tag="底部链接" item="link"}
                <a href="{$link.url}" title="{$link.name}" target="_blank">{$link.name}</a>
                {linkselse}
                <span class="medium-text" style="display: inline-block; margin: var(--space-width-half);">暂无链接</span>
                {/links}
            </div>
        </div>
        <!-- 站点 -->
        {sites assign="sites"}
        {if !empty($sites)}
        <div class="footer-links ui flex-item border-top light-border padding-top-half">
            <div class="start"><div class="margin-top-half">站点链接</div></div>
            <div class="center padding-bottom-half">
                {foreach $sites as $site}
                <a href="{$site.url}" title="{$site.name}" target="_blank">{$site.name}</a>
                {/foreach}
            </div>
        </div>
        {/if}
        <div class="ui flex-item padding-top border-top light-border">
            <div class="center line-height-20px">{$site.html}{if !empty($site.icp)}备案号：<a href="https://beian.miit.gov.cn/" target="_blank">{$site.icp}</a>{/if}</div>
        </div>
    </main>
</footer>
<!-- 随航返回顶部 -->
<div class="fixed-buttons">
    <div class="btn" onclick="scrollToTop()"><i class="fa fa-arrow-up"></i></div>
</div>
<script>
    function initScroll() {
        //获取窗口可用滚动高度
        let height = $(document).height() - $(window).height();
        //已滚动高度
        let top = $(document).scrollTop();
        //计算比例
        let percent = top / height * 100;
        //动态设置进度度位置
        $("#page-reading-percent").width(percent.toFixed(2) + "%");
        //自动拓展导航条
        if (top >= 64) {
            $("header").addClass("top");
            $("#page-qrcode").addClass("scroll");
        } else {
            $("header").removeClass("top");
            $("#page-qrcode").removeClass("scroll");
        }
        if (percent >= 99) {
            $("footer").addClass("bottom");
        } else {
            $("footer").removeClass("bottom");
        }
        if (top > 100) {
            $(".fixed-buttons").show();
        } else {
            $(".fixed-buttons").hide();
        }
    }
    $(function (){
        //监听滚动
        $(document).scroll(function (){
            initScroll();
        });
        let url = window.location.href;
        new QRCode(document.getElementById("page-qrcode-image"), {
            text: url,
            width: 100,
            height: 100,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
    });
</script>
</body>
</html>